<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/frm_base.css}" />
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
</head>
<body>
<div class="main">
    <div class="container head">
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="searchValue" autocomplete="off" placeholder="请输入专业名称或者编号" class="layui-input">
                </div>
                <div class="layui-form-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn">搜索</button>
                    <button class="layui-btn layui-btn-normal" type="button" id="addBtn">添加</button>
                </div>
            </div>
        </form>
    </div>
    <hr class="layui-bg-green">
    <div class="container content">
        <table class="layui-hide" id="subject" lay-filter="subject"></table>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="remove">删除</button>
    </div>
</script>

<script type="text/html" id="dialogHtml">
    <div id="dialog">
        <form action="" class="layui-form" lay-filter="dialog-form">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">专业名称</label>
                <div class="layui-input-block">
                    <input type="text" name="subjectName" lay-verify="required" autocomplete="off" placeholder="请输入专业名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">专业编号</label>
                <div class="layui-input-block">
                    <input type="text" name="subjectNo" lay-verify="required" autocomplete="off" placeholder="请输入专业编号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学制(年)</label>
                <div class="layui-input-block">
                    <input type="number" name="xz" lay-verify="required" autocomplete="off" placeholder="请输入学制年限" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">主任</label>
                <div class="layui-input-block">
                    <input type="text" name="director" lay-verify="required" autocomplete="off" placeholder="请输入主任" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">院系</label>
                <div class="layui-input-block">
                    <select name="academyId" id="academy" lay-verify="required" lay-filter="academy"></select>
                </div>
            </div>
            <div class="layui-form-item" style="display: none">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="dialogBtn" id="dialogBtn">提交</button>
                </div>
            </div>
        </form>
    </div>
</script>

<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(['element', 'layer', 'form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table;;

        var flag = 'add';
        var academyArr = []
        
        getAcademy();
        initTable();

        $('#addBtn').click(function () {
            flag = 'add';
            showDialog();
        })

        // 搜索提交
        form.on('submit(searchBtn)', function (data) {
            search(data.field) // data.field是一个js对象
            return false;
        })

        // dialog提交按钮
        form.on('submit(dialogBtn)', function (data) {
            var formData = data.field;
            console.log(formData)
            update(formData, flag)
            return false;
        })

        //监听工具条
        table.on('tool(subject)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            console.log(data)
            if (layEvent === 'remove') { //删除
                layer.confirm('真的删除？', function (index) {
                    remove(data);
                });
            } else if (layEvent === 'edit') { //编辑
                flag = 'edit';
                showDialog(data);
            }
        });

        // 更新、新增
        function update(param, flag) {
            var url = flag == 'add' ? '/ssms/subject/add' : '/ssms/subject/update';
            $.post(url,param,function (res) {
                if (res.code == 200) {
                    reloadTable();
                    if (layerIdx) layer.close(layerIdx);
                } else {
                    layer.msg(res.msg, {icon: 5, time: 1000})
                }
            })
        }

        // 删除
        function remove(data) {
            $.post('/ssms/subject/delete', {id: data.id},function (res) {
                if (res.code == 200) {
                    reloadTable();
                    layer.msg('删除成功', {icon: 6, time: 1000})
                } else {
                    layer.msg(res.msg, {icon: 5, time: 1000})
                }
            })
        }

        function showDialog(subject) {
            layerIdx = layer.open({
                type: 1,
                area: ['400px', '450px'],
                title: '编辑',
                btn: ['提交'],
                content: $('#dialogHtml').html(),
                success:function(){
                    // 等待弹窗打开后，初始化弹窗的表单
                    initDialogForm(subject);
                },
                yes: function () {
                    // 弹窗的确定按钮监听
                    $('#dialogBtn').click();
                }
            });
        }
        
        function getAcademy() {
            $.get('/ssms/academy/all',function (res) {
                academyArr = res.data
            })
        }

        function initDialogForm(subject) {
            $.each(academyArr, function (index, item) {
                // 下拉菜单里添加院系对应的选项
                $('#academy').append(new Option(item.academyName, item.id));
            });
            form.render("select"); // 重载表单的select，不然select不会更新
            
            if (subject) {
                form.val("dialog-form", {
                    "id": subject.id,
                    "academyId": subject.academyId,
                    "subjectName": subject.subjectName,
                    "xz": subject.xz,
                    "subjectNo": subject.subjectNo,
                    "director": subject.director,
                })
            }
            form.render() // 重新渲染，不然form的checkbox不会更新
        }

        // 初始化表格
        function initTable() {

            table.render({
                elem: '#subject'
                , url: '/ssms/subject/list'
                , cols: [[
                    {type:'numbers'}
                    , {field: 'subjectName', title: '专业名称'}
                    , {field: 'subjectNo', width: 150, title: '专业编号'}
                    , {field: 'xz', width: 100, title: '学制(年)'}
                    , {field: 'academy', width: 200, title: '院系',templet:'<div>{{d.academy.academyName}}</div>'}
                    , {field: 'director', width: 150, title: '主任'}
                    , {title: '操作', toolbar: '#toolbar', width: 150}
                ]]
                , page: true
            });
        }

        // 表格搜索
        function search(fieldObj) {
            console.log(fieldObj)
            table.reload('subject', {
                url: '/ssms/subject/list'
                , where: fieldObj
                , page: {
                    curr: 1
                }
            });
        }
        // 重新加载
        function reloadTable() {
            table.reload('subject', {
                url: '/ssms/subject/list',
            });
        }
    });
</script>
</body>
</html>